ReactのRender Phase

やること

reconciliation (差分を検出)

処理の中断ができる (Fiberの旨味)

Component Treeのrootから辿ってFlugの立っているComponentをループしながら探していく

Flugが立っているものは、そのComponentの更新が必要であることを示す

Flugの立っているComponentはFunctionComponent()を実行してその出力を保存する

以下のようにjsxを変換してElement Objectを作り、Virtual DOMに変換する

code:tsx

// ①This JSX syntax:

return <SomeComponent a={42} b="testing">Text here</SomeComponent>

// ②is converted to this call:

return React.createElement(SomeComponent, {a: 42, b: "testing"}, "Text Here")

// ③and that becomes this element object:

{type: SomeComponent, props: {a: 42, b: "testing"}, children: "Text Here"}

reconciliationをして新しいVirtual DOMを構築する

参考